Date format

IN THIS PAGE

Using the Device Culture's Date and Time Format
Dynamically Setting the Date
Referencing the Date format in Control Format Expressions Using {dialog.clientSideDateFormat}

Description

Specify the format that the user must use for entering date values. An optional time format can be specified. The time portion of the format string is separated from the date portion by '&&'.

Discussion

The Date format

The Date format can be one of the predefined formats:

dd/MM/yy
dd/MM/yyyy
MM/dd/yy
MM/dd/yy
MM/dd/yyyy
dd.MM.yy
dd.MM.yyyy
dd-MM-yy
dd-MM-yyyy
MM-dd-yy
MM-dd-yyyy
yyyy-MM-dd
yyyy/MM/dd
yyyy.MM.dd
<cultureDateFormat>

The time format can be defined by selecting one of the pre-defined formats (using the Insert pre-defined format string link in the Time Format Codes dialog), or manually defined using time format codes. The following codes can be used:

Format Code: Description
0: Format element. Causes a time element - h, m, or s - to be returned with a leading zero.
h: Hour
m: Minute
s: Second
a: 12 hour clock with 'a' or 'p' suffix
am: 12 hour clock with 'am' or 'pm' suffix
A: 12 hour clock with 'A' or 'P' suffix
AM: 12 hour clock with 'AM' or 'PM' suffix
<cultureTimeFormat>: Uses the time format for the device's culture.

If you want to include a format code in the time string, it can be escaped using a backslash. For example:

\h

Using the Device Culture's Date and Time Format

You can specify that the date format, day names and month names for a component should be automatically selected based on the 'Accept-language' property in the request header when the browser makes a request. This makes it easier to build applications that seamlessly adapt based on the user's locale setting.

To use locale settings, set the date format to:

<cultureDateFormat>

If you also want to include time in the format, you can use the following:

<cultureDateFormat> <cultureTimeFormat>

You can also configure the day and month names to use the user's locale. See [Date picker - day names] and [Date picker - month names] to learn more.

Dynamically Setting the Date

If the date format you want to use is not listed, you can dynamically specify the date format at runtime using a special session variable:

session.__protected__clientSideDateFormat

The date is specified using the following date format codes:

Format Code: Description
dd: Day.
MM: Month.
yy: Two-digit year format
yyyy: Four-digit year format

For example, the following Xbasic will format to display like this: "2018 - 09 26"

context.session.__protected__clientSideDateFormat = "yyyy - MM dd"

This code could be placed in the onDialogInitialize event or set after the User has logged into the application.

The result is the date being rendered using the format "yyyy - MM dd" in any date picker:

To include a time format, use the "&&" followed by the desired time format. EG:

context.session.__protected__clientSideDateFormat = "yyyy - MM dd&&0h:0m"

Referencing the Date format in Control Format Expressions Using {dialog.clientSideDateFormat}

{dialog.clientSideDateFormat} is a special placeholder that gets replaced at runtime with the value of the UX component's Date format property. It can be referenced in the Display format for a control. For example:

time("{dialog.clientSideDateFormat}",<value>)

See Grid Component Date format to learn more.